<template>
	<view>
		<view id="bgPage" class="bg">

			<view class="card" @click="goView('/pages/sign/sign')">
				<image src="../../static/Group1.png" mode=""></image>
				<view class="h3">
					烟支评吸
				</view>
				<view class="font">
					Smoke Panel Test
				</view>
			</view>

			<view class="card" @click="goView('/pages/meeting/meeting')">
				<image src="../../static/Group2.png" mode=""></image>
				<view class="h3">
					历史评吸查询
				</view>
				<view class="font">
					History Smoke Panel Test
				</view>
			</view>
			<!-- </router-link> -->

			<view class="user_box">
				<text class="user_title">用户：</text>
				<text>{{ userName }}</text>
			</view>

			<view class="btn_list">

				<view class="btn" v-if="hasLogin">

					<image src="@/static/icons/sign.png" mode=""></image>
					<view class="text" @click="resetSign">
						修改签名
					</view>
				</view>

				<view class="btn" v-if="hasLogin">

					<image src="@/static/icons/edit_pwd.png" mode=""></image>
					<view class="text" @click="resetPaw">
						修改密码
					</view>
				</view>

				<view class="btn">
					<image src="../../static/Vecto2x.png" mode=""></image>
					<view class="text" v-if="hasLogin" @click="logout">
						退出登录
					</view>
					<view class="text" v-else @click="$go('/pages/login/login')">
						登陆
					</view>
				</view>
			</view>


			<zero-loading v-if="isLoading" :mask="true"></zero-loading>
			<!-- <image :src="singImage" mode=""></image> -->

			<uni-popup ref="popup" type="center">
				<view style="width: 100%;height: 100%;background-color: #fff;">
					<view style="display: flex;justify-content: space-between;width: 100%;padding: 10rpx 20rpx 0;"
						v-if="isClick">
						<view class="back" @click="closeSign">返回</view>
						<view style="width: 1px;height: 1px;"></view>
					</view>
					<jushi-signature :settings=" { width: '750', height: '300',  lineWidth: 4, textColor: '#000000' }"
						base64 @change="signatureChange"></jushi-signature>
				</view>
			</uni-popup>

			<!-- 提示内容 -->
			<u-notify ref="uNotify"></u-notify>

		</view>

		<!-- 修改密码的弹窗 -->
		<!-- :asyncClose="true" -->
		<u-modal :show="resetShow" width="500px" title="修改密码" style="z-index: 100;" @confirm="confirmRest"
			:showCancelButton="true" @cancel="cancelReset">
			<view class="edit_box">
				<view class="edit_line">
					<view class="form_label">
						<text>旧密码:</text>
					</view>
					<view class="form_value">
						<input type="password" v-model="editForm.oldPasswd" placeholder="请输入旧密码"
							v-if="!showDict.oldPasswd" class="input_label" />
						<input type="text" v-model="editForm.oldPasswd" placeholder="请输入旧密码" v-else
							class="input_label" />

						<image src="@/static/icons/eye.png" mode="" v-if="showDict.oldPasswd"
							@click="showAnClose('oldPasswd')" class="icon_eye"></image>
						<image src="@/static/icons/no_eye.png" mode="" v-else @click="showAnClose('oldPasswd')"
							class="icon_eye"></image>
					</view>
				</view>
				<view class="edit_line">
					<view class="form_label">
						<text>新密码:</text>
					</view>
					<view class="form_value">
						<input type="password" v-model="editForm.newPasswd" placeholder="请输入新密码"
							v-if="!showDict.newPasswd" class="input_label" />
						<input type="text" v-model="editForm.newPasswd" placeholder="请输入新密码" v-else
							class="input_label" />

						<image src="@/static/icons/eye.png" mode="" v-if="showDict.newPasswd"
							@click="showAnClose('newPasswd')" class="icon_eye"></image>
						<image src="@/static/icons/no_eye.png" mode="" v-else @click="showAnClose('newPasswd')"
							class="icon_eye"></image>
					</view>
				</view>
				<view class="edit_line">
					<view class="form_label">
						<text>确认密码:</text>
					</view>
					<view class="form_value">
						<input type="password" v-model="editForm.aginPasswd" placeholder="请再次输入密码"
							v-if="!showDict.aginPasswd" class="input_label" />
						<input type="text" v-model="editForm.aginPasswd" placeholder="请再次输入密码" v-else
							class="input_label" />

						<image src="@/static/icons/eye.png" mode="" v-if="showDict.aginPasswd"
							@click="showAnClose('aginPasswd')" class="icon_eye"></image>
						<image src="@/static/icons/no_eye.png" mode="" v-else @click="showAnClose('aginPasswd')"
							class="icon_eye"></image>
					</view>
				</view>
			</view>
		</u-modal>

		<u-toast ref="uToast" style="z-index: 99999;"></u-toast>
	</view>

</template>

<script>
	// import {getSmokes,smokeMeetingUser} from "@/api/index.js"
	import request from '@/utils/request.js'
	// #ifdef H5
	import y_uni from '../../utils/webview';
	// #endif

	// import '@/utils/webView2.js'
	export default {
		data() {
			return {
				singImage: "",
				isSing: false,
				resetShow: false, //修改密码的弹窗
				showDict: { // 是否显示密码
					oldPasswd: false,
					newPasswd: false,
					aginPasswd: false
				},
				editForm: {
					oldPasswd: "",
					newPasswd: "",
					aginPasswd: ""
				},
				userName: "", //用户名称
				isClick: false
			}
		},
		onLoad(options) {






			// setTimeout(() => {

			// let _this = this
			// const storeState = this.$store.state;
			// this.isSing = storeState.userInfo.signUrl ? true : false
			// if (!storeState.userInfo.signUrl && !this.isSing) {
			// 	uni.showModal({
			// 		title: '检测到您还未设置签名,请您立即签名！！',
			// 		content: '请确认操作！',
			// 		showCancel: false,
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				console.log('用户点击确定');
			// 				_this.$refs.popup.open()

			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消');
			// 			}
			// 		}
			// 	});
			// }
			// }, 10)

		},
		async mounted() {







			// console.log('token', uni.getStorageSync('token'));


			// #ifdef H5 
			try {
				console.log('window.location', decodeURIComponent(window.location));

				var params = {};

				if (window.plus) {
					if (plus.webview.getWebviewById("custom-webview")) {
						const appData = plus.webview.getWebviewById("custom-webview").data;
						console.log('appData', JSON.stringify(appData));
						params = appData
					}
				} //加上此判断以免再浏览器打开h5页面时报plus is not define

				// let url = decodeURIComponent(window.location.href)

				// // 获取查询字符串（即 '?' 后面的部分）  
				// var queryString = url.split('?')[1];

				// // 如果没有查询字符串，则退出  
				// if (!queryString) {
				// 	console.log('No query string found.');
				// 	return;
				// }

				// // 将查询字符串转换为对象  
				// var params = {};
				// queryString.split('&').forEach(function(pair) {
				// 	pair = pair.split('=');
				// 	params[pair[0]] = JSON.parse(pair[1]) || ''
				// });

				// console.log((params));




				if (params) {
					uni.setStorageSync('notifyShowName', params.notifyShowName)
					uni.setStorageSync('access_token', params.access_token)
					uni.setStorageSync('userInfo', params.userInfo)
					uni.setStorageSync('webview', true)
					this.$store.state.userInfo = params.userInfo

				}
				console.log(JSON.stringify(params));
				console.log('storage', uni.getStorageSync('notifyShowName'), uni.getStorageSync('access_token'), uni
					.getStorageSync('userInfo'));


			} catch (err) {
				console.log(err);
			}
			// #endif











			let userInfo = uni.getStorageSync("userInfo")

			this.$store.state.hasLogin = userInfo ? true : false,

				this.userName = userInfo.description || ""
			// this.$refs.popup.open
			let userName = uni.getStorageSync("notifyShowName")

			if (userName) {
				this.$refs.uNotify.show({
					top: 100,
					type: 'success',
					color: '#279863',
					bgColor: '#00ff0002',
					message: `欢迎登陆！${ userName }！`,
					duration: 1000 * 2,
					fontSize: 20,
					safeAreaInsetTop: true
				})
				uni.removeStorageSync("notifyShowName")
			}

			await this.getSignStatus()
		},
		methods: {
			closeSign() {
				this.$refs.popup.close()
			},
			getSignStatus() {
				let _this = this
				const storeState = this.$store.state;

				this.isSing = storeState.userInfo.signUrl ? true : false
				if (!storeState.userInfo.signUrl && !this.isSing) {
					uni.showModal({
						title: '检测到您还未设置签名,请您立即签名！！',
						content: '请确认操作！',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.$refs.popup.open()

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},


			async signatureChange(e) {
				// console.log(e);
				this.singImage = e
				if (e = '') {

				} else {}


				if (this.singImage != '') {
					const res = await request.post('/ipad/login/faceSignBase64', {
						baseFile: this.singImage
					})
					console.log(res);
					if (res.data) {
						uni.showToast({
							title: '签名成功',
							duration: 2000,
						});
						this.$store.state.userInfo.signUrl = this.singImage
						this.isSing = true
						this.$refs.popup.close()
					}
				}

			},
			/**修改密码*/
			resetPaw() {
				this.resetShow = true
			},
			// 修改签名
			resetSign() {
				console.log('resetSign');
				this.isClick = true
				this.$refs.popup.open()
			},




			// 确认修改密码
			async confirmRest() {
				let reg =
					/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/;
				let loop = false
				let tipText = '请检查是否输入完毕'
				Object.keys(this.editForm).forEach(key => {
					console.log(key);
					const value = this.editForm[key].trim()
					if (!this.editForm[key]) {
						loop = true
					} else if (value.length < 8 || value.length > 18) {
						loop = true
						tipText = '密码必须十8 ~ 18位'
					}

					if (key != 'oldPasswd') {
						if (!reg.test(value)) {
							loop = true
							tipText = '密码必须十8 ~ 18位并且必须包含大小写'
						}
					}

				})



				if (loop) {
					return this.$refs.uToast.show({
						type: 'error',
						icon: false,
						title: '失败主题',
						message: tipText,
					});
				}

				if (this.editForm.newPasswd.trim() !== this.editForm.aginPasswd.trim()) {
					console.log("前后密码不一致")
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: '失败主题',
						message: "前后密码不一致"
					})

					return
				}

				const res = await request.put('/ipad/login/updatePassword', {
					oldPasswd: this.editForm.oldPasswd,
					newPasswd: this.editForm.newPasswd
				})
				console.log("修改的结果为", res)
				if (res.code != 200) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: '失败主题',
						message: `修改失败,失败原因${res.msg}`
					})
					return
				}
				this.$refs.uToast.show({
					type: "success",
					icon: false,
					title: '成功主题',
					message: "修改成功"
				})

				this.reset()
				this.resetShow = false

				setTimeout(() => {
					// uni.redirectTo({
					// 	url:
					// })
					this.storeLogout()
				}, 1000)

			},
			// 取消修改密码
			cancelReset() {
				this.resetShow = false
				this.reset()
				this.$refs.uToast.show({
					type: "info",
					icon: false,
					title: '默认主题',
					message: "取消修改密码"
				})
			},
			// 重设
			reset() {
				this.editForm = {
					oldPasswd: "",
					newPasswd: "",
					aginPasswd: ""
				}
				this.showDict = {
					oldPasswd: false,
					newPasswd: false,
					aginPasswd: false
				}
			},

			logout() {
				uni.showModal({
					title: '退出登录',
					content: '请确认操作！',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');

							// console.log(window.parent[0].postMessage);
							// uni.postMessage()

							// window.parent.postMessage({
							// 	action: 'your_action',
							// 	payload: {
							// 		a:"0000000"
							// 	}
							// }, '*');

							// window.parent[0].postMessage({
							// 	action: 'your_action',
							// 	payload: {
							// 	a:"0000000"
							// 	}
							// }, '*');


							try {


								y_uni.postMessage({
									data: {
										action: 'logout'
									}
								});
								y_uni.getEnv(function(res) {
									console.log('当前环境：' + JSON.stringify(res));
								});
							} catch (err) {
								console.log('err', err);
							}
							if (!uni.getStorageSync('webview')) {
								this.storeLogout()
							}


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			goView(url) {
				console.log('store', JSON.stringify(this.$store.state));
				console.log('token', JSON.stringify(uni.getStorageSync('token')));
				console.log('userInfo', JSON.stringify(uni.getStorageSync('userInfo')));
				console.log('haslogn', this.hasLogin);
				// return false

				const storeState = this.$store.state;
				this.isSing = storeState.userInfo.signUrl ? true : false
				console.log(storeState.userInfo.signUrl);
				console.log(this.isSing);
				if (!storeState.userInfo.signUrl && !this.isSing) {
					this.getSignStatus()

					return false
				}


				if (this.hasLogin) {
					this.$go(url)
				} else {
					// this.$go('/pages/login/login')
				}
			},

			showAnClose(key) {
				let value = this.showDict[key]
				this.$set(this.showDict, key, !value)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.btn_list {
		display: flex;
		align-items: center;
		position: fixed;
		top: 12rpx;
		right: 32rpx;
	}

	.user_box {
		position: fixed;
		display: flex;
		align-items: center;
		left: 32px;
		top: 42px;
		z-index: 6;
		font-size: 30px;
		color: #2db587;

		.user_title {
			color: #54b576;
			transform: scale(0.9);
		}
	}

	.btn {
		width: 124.87rpx;
		height: 55.69rpx;
		background-image: url(../../static/Rectangle3.png);
		background-position: center center;
		background-size: cover;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 13rpx;
			height: 13rpx;
			margin-right: 10rpx;

		}

		.text {
			font-size: 13rpx;
			color: #5D9C9C;
			line-height: 1;
			margin-top: -3px;
		}

	}

	.bg {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.card {
		width: 177.03rpx;
		height: 205.58rpx;
		font-size: 18rpx;
		font-weight: 600;
		color: #68B28E;
		line-height: 21rpx;
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
		background-image: url(@/static/Rectangle2.png);
		// background: linear-gradient(to bottom, #EAFFF5, rgba(234, 255, 245, 0));
		background-size: 100% 100%;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;


		image {
			width: 91.15rpx;
			height: 68.47rpx;
			margin-bottom: 14rpx;
		}

		.h3 {

			height: 27rpx;
			font-size: 18rpx;
			font-weight: 600;
			color: #68B2AE;
			line-height: 21rpx
		}

		.font {

			height: 17rpx;
			font-size: 11rpx;
			font-weight: 400;
			color: #7DC3A1;
			line-height: 13rpx;

		}


		&:first-child {
			margin-right: 72rpx;
		}
	}

	::v-deep .uni-popup__wrapper {
		width: 100%;
		height: 100%;

		.container {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.center {
			border: 1px dashed #000;
			width: 94%;
			margin: 20rpx auto 10rpx;
			box-sizing: border-box;
			height: 330rpx;
		}

		.sign-area {
			font-size: 70rpx;
			top: 50%;
			left: 50%;

			-webkit-transform: rotate(-20deg) translate(-50%, -100%);
			transform: rotate(-20deg) translate(-50%, -100%);
		}

		.uni-canvas {
			width: 100%;
			height: 100%;
		}

		.btn-view {
			display: flex;
			justify-content: flex-end;

			.save {
				background: linear-gradient(to right, #65da8f, #2db587);
				height: 40rpx;
				width: 100rpx;
				margin-right: 20rpx;
			}

			.clear {
				background: linear-gradient(to right, fffb00, #ffa500);
				height: 40rpx;
				width: 100rpx;
				margin-right: 20rpx;
			}
		}

	}

	.edit_box {
		width: 100%;
		min-height: 300px;

		.edit_line {
			height: 60px;
			display: flex;
			align-items: end;
			justify-content: space-between;
		}

		.form_label {
			width: 80px;
			text-align: right;
			transform: translateY(12px);
		}

		.form_value {
			flex: 1;
			padding-left: 10px;
			position: relative;

			.icon_eye {
				position: absolute;
				right: 20px;
				top: 50%;
				transform: translateY(-50%);
				--size: 20px;
				width: var(--size);
				height: var(--size);
			}
		}

		.input_label {
			padding: 10px 20px;
			box-sizing: content-box;
			border-bottom: 1px solid #ddd;
		}
	}

	::v-deep .u-transition {
		z-index: 100 !important;
	}

	::v-deep .u-fade-zoom-enter-active {
		z-index: 100 !important;
	}

	.back {
		width: 125px;
		height: 48px;
		background-image: url(@/static/Rectangle39.png);
		background-size: cover;
		font-size: 20px;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 48px;
		text-align: center;

	}
</style>